<template>
  <div class="toggle-sections-container">
    <div class="layout-container">
      <div
        class="sidebar-container"
        :style="{
          width: isCollapsed ? 0 : sidebarWidth,
          minWidth: isCollapsed ? 0 : sidebarWidth,
        }"
      >
        <slot name="sidebar" :isCollapsed="isCollapsed" />
      </div>
      <button
        class="sidebar-toggle"
        :style="{ left: isCollapsed ? '0' : sidebarWidth }"
        @click="toggle"
      >
        <component :is="isCollapsed ? ArrowRight : ArrowLeft" />
      </button>
      <div class="content-container">
        <slot name="content" :isCollapsed="isCollapsed" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

defineProps({
  sidebarWidth: {
    type: String,
    default: '20%',
  },
})

const isCollapsed = ref(false)

const toggle = () => {
  isCollapsed.value = !isCollapsed.value
}

defineExpose({
  isCollapsed,
})
</script>

<style lang="scss">
.toggle-sections-container {
  height: 100%;
  width: 100%;
}

.layout-container {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
}

.sidebar-container {
  transition: width 0.3s ease;
  height: 100%;
  position: relative;
  flex-shrink: 0; /* 禁止收缩 */
  overflow: hidden; /* 防止内容溢出影响布局 */
}

.content-container {
  flex: 1;
  height: 100%;
  min-width: 0; /* 防止flex项目溢出 */
  transition: width 0.3s ease;
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 10px;
  height: 25px;
  z-index: 1000;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: left 0.3s ease;

  svg {
    width: 1em;
    height: 1em;
  }
}
</style>
